<script setup>
import { ref } from 'vue'
import { ElMessage } from 'element-plus'

// 当前选择的日期
const selectedDate = ref(new Date())

// 当前显示的年份和月份
const currentYear = ref(selectedDate.value.getFullYear())
const currentMonth = ref(selectedDate.value.getMonth())

// 标记日期列表
const markedDates = ref([
  new Date(currentYear.value, currentMonth.value, 15), // 标记 15 号为一个特殊日期
  new Date(currentYear.value, currentMonth.value, 25), // 标记 25 号为另一个特殊日期
])

// 切换到上一个月
const prevMonth = () => {
  if (currentMonth.value === 0) {
    currentMonth.value = 11
    currentYear.value -= 1
  } else {
    currentMonth.value -= 1
  }
}

// 切换到下一个月
const nextMonth = () => {
  if (currentMonth.value === 11) {
    currentMonth.value = 0
    currentYear.value += 1
  } else {
    currentMonth.value += 1
  }
}

// 选择日期事件
const handleDateChange = (date) => {
  selectedDate.value = date
  ElMessage.success(`你选择的日期是: ${date.toDateString()}`)
}
</script>

<template>
  <div class="calendar-wrapper">
    <el-card class="calendar-card">
      <template #header>
        <div class="header-title">
          📅 我的日历
        </div>
        <div class="month-switch">
          <el-button @click="prevMonth" icon="el-icon-arrow-left" size="mini"></el-button>
          <span>{{ currentYear }} 年 {{ currentMonth + 1 }} 月</span>
          <el-button @click="nextMonth" icon="el-icon-arrow-right" size="mini"></el-button>
        </div>
      </template>

      <el-calendar
          v-model="selectedDate"
          :date-cell-style="dateCellStyle"
          @change="handleDateChange"
      />
    </el-card>
  </div>
</template>

<style scoped>
.calendar-wrapper {
  padding: 20px;
  display: flex;
  justify-content: center;
}

.calendar-card {
  width: 100%;
  max-width: 900px;
}

.header-title {
  font-size: 18px;
  font-weight: bold;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.month-switch {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
}

.el-button {
  padding: 5px;
}
</style>
